﻿@model IEnumerable<DevExtreme.NETCore.Demos.Models.EmployeeMention>

@section ExternalDependencies {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
}

<div id="chat-window">
    <div class="message dx-theme-background-color">
        <div class="photo">
            <img src="../../images/mentions/Kevin-Carter.png" />
        </div>
        <div class="name">
            Kevin Carter
        </div>
        <div class="date">
            07/03/19 - 12:22AM
        </div>
        <div class="text">
            <span class="dx-mention" spellcheck="false"><span><span>@@</span>John Heart</span></span> What experience do you have in this field?
        </div>
    </div>
    <br />
    <div class="message dx-theme-background-color">
        <div class="photo">
            <img src="../../images/mentions/John-Heart.png" />
        </div>
        <div class="name">
            John Heart
        </div>
        <div class="date">
            07/03/19 - 12:25AM
        </div>
        <div class="text">
            I've been in the audio/video industry since 2001, and I've been the CEO of DevAv since 2009.
        </div>
    </div>
    <br />
    <div class="message dx-theme-background-color">
        <div class="photo">
            <img src="../../images/mentions/Kevin-Carter.png" />
        </div>
        <div class="name">
            Kevin Carter
        </div>
        <div class="date">
            07/03/19 - 12:26AM
        </div>
        <div class="text">
            That's very interesting. <span class="dx-mention" spellcheck="false"><span><span>@@</span>Olivia Peyton</span></span>, what do you think?
        </div>
    </div>
</div>
@(Html.DevExtreme().HtmlEditor()
    .ID("html-editor")
    .Mentions(m => {
        m.Add().DataSource(Model).SearchExpr("text").DisplayExpr("text").ValueExpr("text");
    })
    .Content(@<text>
        <p>
            <span class="dx-mention" spellcheck="false" data-marker="@@" data-mention-value="Kevin Carter"><span contenteditable = "false"><span>@@</span>Kevin Carter</span></span> I think John's expertise can be very valuable in our startup.
        </p>
    </text>)
)
